<template>
  <div id="orderDetail" class="text-sm">
    <h2 class="my-8 pl-2 text-xl font-[600] lg:my-10 uppercase">
      {{ $mt('Order Details') }}
    </h2>
    <div class="lg:flex items-start">
      <!-- 订单详情 pc -->
      <div class="hidden lg:block lg:w-5/12 lg:mr-8 bg-[#232526] px-4 lg:px-6 lg:pt-4 rounded-lg pt-1 pb-4 mb-4">
        <div
          class="flex cursor-pointer lg:justify-between items-center h-16 border-b border-[#404041]"
          @click="copy(orderDetailInfo?.orderId)">
          <span class="text-sm">{{ $mt('orderId') }}</span>
          <span class="font-medium text-base lg:text-base lg:font-bold lg:text-red1">
            {{ orderDetailInfo?.orderId }}
          </span>
        </div>
        <!-- Order Status -->
        <div class="flex items-center justify-between mt-3 mb-2 h-10">
          <span class="text-sm">{{ $mt('Order Status') }}</span>
          <span
            class="font-medium text-[#f1c21b]"
            :class="{
              'text-[#1dcc6f]': orderDetailInfo?.orderStatus === 'SUCCESS',
              'text-[#da1e28_!important]': orderDetailInfo?.orderStatus === 'CANCEL',
            }">
            {{ orderDetailInfo?.orderStatus }}
          </span>
        </div>
        <!-- Created on -->
        <div class="flex items-center justify-between pb-3 h-10">
          <span class="text-sm">{{ $mt('Created on') }}</span>
          <span class="font-medium">{{ orderDetailInfo?.createdAt }}</span>
        </div>
        <!-- shipAt -->
        <div v-if="orderDetailInfo?.shipAt" class="flex items-center justify-between pb-3 h-10">
          <span class="text-sm">{{ $mt('ship on') }}</span>
          <span class="font-medium">{{ orderDetailInfo?.shipAt }}</span>
        </div>
        <!-- shipFailReason -->
        <div v-if="orderDetailInfo?.shipFailReason" class="flex items-center justify-between pb-3 h-10">
          <span class="text-sm">{{ $mt('shipFailReason') }}</span>
          <span class="font-medium">{{ orderDetailInfo?.shipFailReason }}</span>
        </div>
        <!-- paymentFeeAmount -->
        <div v-if="orderDetailInfo?.paymentFeeAmountForUSD" class="flex items-center justify-between pb-3 h-8">
          <div class="text-xs">{{ $mt('Payment Fee') }}</div>
          <span class="font-medium">{{ $calcPrice(orderDetailInfo?.paymentFeeAmountForUSD) }}</span>
        </div>
        <!-- totalAmount -->
        <div class="flex items-center justify-between h-12 mb-1 mt-3 border-t border-[#404041]">
          <span class="text-sm">{{ $mt('totalAmount') }}</span>
          <span class="font-medium text-red1">
            {{ $calcPrice(orderDetailInfo?.totalAmountForUSD) }}
          </span>
        </div>
      </div>
      <div class="lg:w-7/12">
        <div class="lg:flex items-center justify-between">
          <!-- Product details -->
          <div class="bg-[#232526] lg:w-7/12 lg:mr-4 px-4 pb-4 rounded-lg cursor-pointer mb-4">
            <h3 class="lg:text-base lg:font-bold text-sm font-medium mb-2 py-4 border-b border-[#404041]">
              {{ $mt('Product details') }}
            </h3>
            <nuxt-link
              external
              :to="
                $localePath(
                  `/goods/${orderDetailInfo?.goodsSku?.goods?.urlName || orderDetailInfo?.goodsSku?.goods?.id}`,
                )
              "
              class="flex items-center">
              <YImage
                class="w-16 lg:w-[80px] lg:h-[80px] h-16 mr-4 rounded shadow-2xl shadow-black"
                :src="$withPicOrigin(orderDetailInfo?.goodsSku?.goods?.imageUrl)"
                :alt="orderDetailInfo?.goodsSku?.goods?.name"
                height="30" />
              <div>
                <div class="mb-1 lg:mb-2 text-sm lg:text-base font-medium">
                  {{ orderDetailInfo?.goodsSku?.goods?.name }}
                </div>
                <div class="flex items-center">
                  <div class="mr-2 text-xs lg:text-sm">{{ orderDetailInfo?.goodsSku?.name }}</div>
                  <div class="bg-[#43454680] shrink-0 rounded-lg px-1 py-0.5 text-xs">
                    x {{ orderDetailInfo?.count }}
                  </div>
                </div>
              </div>
            </nuxt-link>
          </div>
          <!-- 订单详情 h5 -->
          <div class="lg:hidden bg-[#232526] px-4 rounded-lg pt-1 pb-4 mb-4">
            <div
              class="flex cursor-pointer items-center h-16 border-b border-[#404041]"
              @click="copy(orderDetailInfo?.orderId)">
              <span class="font-medium text-base">{{ orderDetailInfo?.orderId }}</span>
            </div>
            <!-- Order Status -->
            <div class="flex items-center justify-between mt-3 mb-2 h-8">
              <span class="text-xs">{{ $mt('Order Status') }}</span>
              <span
                class="font-medium text-[#f1c21b]"
                :class="{
                  'text-[#1dcc6f]': orderDetailInfo?.orderStatus === 'SUCCESS',
                  'text-[#da1e28_!important]': orderDetailInfo?.orderStatus === 'CANCEL',
                }">
                {{ orderDetailInfo?.orderStatus }}
              </span>
            </div>
            <!-- Created on -->
            <div class="flex items-center justify-between mb-2 h-8">
              <span class="text-xs">{{ $mt('Created on') }}</span>
              <span class="font-medium">{{ orderDetailInfo?.createdAt }}</span>
            </div>
            <!-- payment -->
            <div class="flex items-center justify-between mb-2 h-8">
              <div class="text-xs">{{ $mt('Payment method') }}</div>
              <YImage
                class="h-7 rounded shadow-2xl shadow-black"
                :src="$withPicOrigin(orderDetailInfo?.payment?.imageUrl)"
                :alt="orderDetailInfo?.name"
                height="30" />
            </div>
            <!-- paymentFeeAmount -->
            <div
              v-if="orderDetailInfo?.paymentFeeAmountForUSD"
              class="flex items-center justify-between mb-2 pb-3 h-8 border-b border-[#404041]">
              <div class="text-xs">{{ $mt('Payment Fee') }}</div>
              <span class="font-medium">{{ $calcPrice(orderDetailInfo?.paymentFeeAmountForUSD) }}</span>
            </div>
            <!-- totalAmount -->
            <div class="flex items-center justify-between mb-1 mt-3">
              <span class="text-xs">{{ $mt('totalAmount') }}</span>
              <span class="font-medium text-red1">
                <!-- {{ orderDetailInfo.shipOrderParamsData.currency }} -->
                {{ $calcPrice(orderDetailInfo?.totalAmountForUSD) }}
              </span>
            </div>
          </div>
          <!-- 付款方式 pc-->
          <div class="bg-[#232526] lg:flex flex-col lg:h-[161px] lg:w-5/12 rounded-lg mb-4 px-4 hidden">
            <div class="lg:text-base lg:font-bold text-sm font-medium py-4 border-b border-[#404041]">
              {{ $mt('Payment method') }}
            </div>
            <div class="py-3 rounded-lg flex items-center lg:flex-1">
              <YImage
                class="h-10 rounded shadow-2xl shadow-black mr-3"
                :src="$withPicOrigin(orderDetailInfo?.payment?.imageUrl)"
                :alt="orderDetailInfo?.name"
                height="30" />
              <div class="font-medium">{{ orderDetailInfo?.payment?.name }}</div>
            </div>
          </div>
        </div>
        <!-- Order Information -->
        <div class="bg-[#232526] px-4 pb-2 lg:pb-4 rounded-lg mb-4">
          <h3 class="text-sm lg:text-base lg:font-bold font-medium mb-5 lg:mb-6 border-b py-4 border-[#404041]">
            {{ orderDetailInfo?.rechargeFormList?.length ? $mt('Order Information') : $mt('More actions') }}
          </h3>
          <div class="mb-3 lg:mb-4" v-if="orderDetailInfo?.rechargeFormList?.length">
            <div
              class="flex items-center justify-between lg:justify-start"
              v-for="item in orderDetailInfo?.rechargeFormList">
              <div class="min-w-12 lg:min-w-[80px] text-xs lg:text-sm lg:mr-[80px]">{{ item.name }}</div>
              <div class="line-clamp-1 font-medium">{{ item.selected === 1 ? item.value.name : item.value }}</div>
            </div>
          </div>

          <!-- btn -->
          <div class="flex items-center justify-end flex-wrap mt-4">
            <!-- 再来一单 -->
            <div
              v-if="orderDetailInfo?.orderStatus !== 'PENDING'"
              @click.stop="buyAgainHandle(orderDetailInfo)"
              class="flex min-w-[110px] mb-2 cursor-pointer items-center justify-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 p-2 ml-2">
              <span class="text-sm font-medium">{{ $mt('Buy Again') }}</span>
            </div>
            <!--      联系客服-->
            <div
              @click.stop="handleContact"
              class="flex min-w-[110px] mb-2 cursor-pointer items-center justify-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 p-2 ml-2">
              <span class="text-sm font-medium">{{ $mt('Contact') }}</span>
            </div>
            <!--      待支付-->
            <div
              v-if="orderDetailInfo?.orderStatus === 'PENDING'"
              @click.stop="
                $payWithOrderInfo({
                  orderInfo: orderDetailInfo,
                  showReport: false,
                  paymentData: orderDetailInfo?.payment,
                })
              "
              class="flex min-w-[110px] mb-2 cursor-pointer items-center justify-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 p-2 whitespace-nowrap ml-2">
              <span class="text-sm font-medium">
                {{ $calcPrice(orderDetailInfo?.totalAmountForUSD) }} {{ $mt('Pay Now') }}
              </span>
            </div>
            <!--      取消-->
            <div
              @click.stop="handleCancelOrder()"
              v-if="orderDetailInfo?.orderStatus === 'PENDING'"
              class="flex min-w-[110px] mb-2 cursor-pointer items-center justify-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 p-2 whitespace-nowrap ml-2">
              <span class="text-sm font-medium">{{ $mt('Cancel') }}</span>
            </div>
            <!--查看卡密-->
            <div
              @click.stop="showPassCodeData(orderDetailInfo)"
              class="rounded-2xl py-1 ml-2"
              v-if="orderDetailInfo?.orderStatus === 'SUCCESS' && orderDetailInfo?.passCodeData">
              <div
                class="flex cursor-pointer items-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 px-3 py-1">
                <span class="uppercase">{{ $mt('Viewing Code') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useClipboard } from '@vueuse/core'

useSeoMeta({ title: 'BitTopup - Order Detail' })
definePageMeta({
  middleware: 'auth',
})
const { $mt, $pushRoute, $forcePushRoute } = useCommonPlugin()
const { text, copy, copied, isSupported } = useClipboard()
const { withLoadingToastRef, loadingRef } = useRequestLoading()
const { requestPostNew, requestGetNew } = useRequest()

const orderId = useRoute().query?.orderId
const fullPath = useRoute().fullPath
// const orderDetailInfo = useLocalStorage('orderDetailInfo', {})
const orderDetailInfo = ref({})
const initCurrentOrderDetailInfo = async () => {
  const res = await requestGetNew(`app/user/orderDetail/${orderId}`, {}, { withAuth: true })
  orderDetailInfo.value = res
}
const buyAgainHandle = async (item) => {
  return $pushRoute(`/goods/${item?.goodsSku?.goods?.urlName || item?.goodsSku?.goods?.id}`)
}
//取消订单
const handleCancelOrder = async () => {
  await requestPostNew(`/app/order/cancel`, { orderId: orderDetailInfo.value?.id }, { withAuth: true })
  // $forcePushRoute(fullPath)
  await initCurrentOrderDetailInfo()
}
// 查看卡密
const showPassCodeData = async (order) => {
  await showDialog({
    title: $mt('PIN CODE'),
    message: order.passCodeData,
    theme: 'round-button',
    confirmButtonText: $mt('COPY'),
  })
  copy(order.passCodeData)
}
watch(copied, (val) => {
  if (val) showToast($mt('copied'))
})
onBeforeMount(async () => {
  await initCurrentOrderDetailInfo()
})
withLoadingToastRef()
</script>

<style scoped lang="scss">
#orderDetail {
}
</style>
